<template>
  <view>
    <u-navbar :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" title="预约信息" :immersive="true" :border-bottom="false"></u-navbar>
    <view class="" style="width: 100%; height: 280rpx; background: url(https://wenzhen.jiangkukeji360.com/static/index/bg.png) no-repeat; background-size: 100% 100%">
      <view class="" style="padding: 76rpx 0 24rpx 28rpx"></view>
      <view class="" style="margin: 28rpx; background: #fff; box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1); border-radius: 20rpx; margin-top: 80rpx">
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 44rpx 0 44rpx 5rpx">
          <view class="" style="display: flex; align-items: center; padding-left: 30rpx">
            <image :src="doctors.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border: 2rpx solid #ffffff; border-radius: 50%"></image>
            <view class="" style="padding-left: 25rpx">
              <view class="">
                <text style="font-size: 32rpx; font-weight: bold">{{ doctors.doctor_name }}</text>
                <text style="font-size: 26rpx; padding-left: 15rpx">{{ doctors.doctor_title }}</text>
              </view>

              <view class="">
                <text style="font-size: 26rpx; color: #666666">{{ doctors.department_name }}</text>
                <text style="font-size: 26rpx; color: #666666; padding-left: 24rpx">{{ doctors.hospital_name }}</text>
              </view>
            </view>
          </view>
          <!-- 分 -->
        </view>
      </view>
    </view>
    <view class="" style="height: 60rpx"></view>

    <!-- 门诊 -->
    <view class="" style="font-size: 30rpx; color: #999999; padding: 20rpx 28rpx; margin-top: 30rpx">共{{ getlist.length }}家坐诊机构</view>

    <scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y" style="white-space: nowrap">
      <view class="" style="display: flex; align-items: center">
        <view :class="current1 == k ? 't' : 't1'" v-for="(i, k) in getlist" :key="k" @tap="(current1 = k), xi()">
          <view class="" style="width: 240rpx; padding: 0 15rpx; overflow: hidden">
            {{ i.name }}
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="" style="width: 100%; height: 20rpx; background: #f8f8f8; margin-top: 30rpx"></view>

    <view class="" v-if="getlist[current1]" style="font-size: 32rpx; padding-top: 15rpx; padding-left: 28rpx">
      {{ getlist[current1].name }}
    </view>
    <!-- 日历 -->
    <view class="" style="display: flex; align-items: center; margin: 75rpx 28rpx 0 28rpx; justify-content: space-between">
      <view class="" v-for="(i, k) in list" :key="k" style="width: 14.2%; font-size: 28rpx; color: #666666; text-align: center">
        {{ i }}
      </view>
    </view>

    <view class="" style="display: flex; align-items: center; flex-wrap: wrap; margin: 0rpx 28rpx; border-bottom: 1rpx solid #f0f0f0; padding-bottom: 35rpx">
      <view
        :class="i.is_clinic == 0 ? 'wu' : ''"
        v-for="(i, k) in dataList"
        :key="k"
        style="font-size: 26rpx; text-align: center; width: 14.2%; margin-top: 50rpx"
        @tap="change(i, k)"
      >
        <view :class="i.is_clinic == 1 && current == k ? 'on1' : 'on'">
          {{ i.time }}
        </view>
        <view class="" :style="i.is_clinic == 1 && current == k ? 'color:#6699ff' : ''">
          {{ i.text }}
        </view>
      </view>
    </view>

    <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 29rpx 28rpx" v-if="dataList[current]">
      <view class="" style="font-size: 28rpx">{{ dataList[current].w }}·{{ dataList[current].mouth }}-{{ dataList[current].time }} 上午·普通号</view>
      <view :class="dataList[current].morning == 0 || isAfternoon() ? 'btn1' : 'btn'"
            @tap="handleTap">
        剩余{{ dataList[current].morning == 0 || isAfternoon() ? '已无号' : dataList[current].morning + '个号' }}
      </view>
    </view>



    <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 15rpx 28rpx" v-if="dataList[current]">
      <view class="" style="font-size: 28rpx">{{ dataList[current].w }}·{{ dataList[current].mouth }}-{{ dataList[current].time }} 下午·普通号</view>
      <view :class="dataList[current].afternoon == 0 ? 'btn1' : 'btn'" v-if="dataList != ''" @tap="morning(2)">剩余{{ dataList[current].afternoon }}个号</view>
    </view>
    <!-- 温馨提示 -->
    <view class="" style="font-size: 26rpx; color: #666666; padding-left: 32rpx">温馨提示</view>
    <view class="" style="font-size: 26rpx; color: #666666; padding: 22rpx 32rpx">*号源由医生本人提供、与医生无关。到医院需按医院门 诊价格缴纳医事服务费</view>

    <u-modal v-model="show" :show-cancel-button="true" title="选择患者" @confirm="confirm">
      <view class="slot-content">
        <view
          class=""
          v-for="(i, k) in jook"
          :key="k"
          style="display: flex; align-items: center; font-size: 28rpx; justify-content: space-between; padding: 28rpx 51rpx"
          @tap="cull = k"
        >
          <view class="">
            {{ i.patient_name }}
          </view>
          <radio :checked="cull == k" style="transform: scale(0.7)" color="#0FB8FF"></radio>
        </view>
      </view>
      <view class="" style="text-align: center; font-size: 30rpx; color: #1a9eff; padding: 30rpx" @tap="add">添加患者</view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      current: 0,
      current1: 0,
      id: null,
      dataList: [],
      doctors: {},
      getlist: [],
      scrollTop: 0,
      show: false,
      jook: [],
      cull: 0,
      after: null
    };
  },
  methods: {
    add() {
      uni.navigateTo({
        url: '/pages/user/data'
      });
    },
    morning(e) {
      this.after = e;
      if (e == 1) {
        if (this.dataList[this.current].morning == 0) {
          uni.showToast({
            title: '暂无号源',
            icon: 'none'
          });
        } else {
          this.show = true;
        }
      } else {
        if (this.dataList[this.current].afternoon == 0) {
          uni.showToast({
            title: '暂无号源',
            icon: 'none'
          });
        } else {
          this.show = true;
        }
      }
    },
	isAfternoon() {
	    const now = new Date();
	    const hours = now.getHours();
	    return hours >= 12; // 如果当前时间在中午12点之后，返回 true
	},
	 handleTap() {
	    if (this.dataList[this.current].morning > 0 && !this.isAfternoon()) {
	      this.morning(1);
	    }
	  },
    change(i, k) {
      if (i.is_clinic == 0) {
      } else {
        this.current = k;
      }
    },
    goget() {
      uni.navigateTo({
        url: 'allgongg'
      });
    },
    zhen() {
      this.api({
        url: '/api/register/getUserClinicList',
        method: 'post',
        data: {
          doctor_id: this.id
        }
      }).then((res) => {
        this.getlist = res.data;
        this.xi();
      });
    },
    confirm() {
	  console.log('111')
      uni.navigateTo({
        url:
          '/user/make/make?doctor_id=' +
          this.id +
          '&patient_id=' +
          JSON.stringify(this.jook[this.cull]) +
          '&clinic_type=' +
          this.after +
          '&clinic_id=' +
          JSON.stringify(this.getlist[this.current1]) +
          '&week=' +
          this.dataList[this.current].w +
          '&time=' +
          this.dataList[this.current].mouth +
          '-' +
          this.dataList[this.current].time
      });
    },
    xi() {
      this.api({
        url: '/api/register/getClinic',
        method: 'post',
        data: {
          doctor_id: this.id,
          clinic_id: this.getlist[this.current1].id
        }
      }).then((res) => {
        this.list = res.data.weekList;
        this.dataList = res.data.dataList;
      });
    },
    doctor() {
      this.api({
        url: '/api/doctor/details',
        method: 'post',
        data: {
          doctor_id: this.id
        }
      }).then((res) => {
        this.doctors = res.data;
      });
    },
    gets() {
      this.api({
        url: '/api//index/patientList',
        method: 'post'
      }).then((res) => {
        this.jook = res.data;
        this.jook.map((i, k) => {
          if (i.default == 1) {
            this.cull = k;
          }
        });
      });
    }
  },
  onShow() {
    this.zhen();
    this.gets();
  },
  onLoad(op) {
    this.id = op.id;
    this.doctor();
  }
};
</script>

<style>
page {
  background: #fff;
}
.on {
  font-size: 34rpx;
  font-weight: bold;
}

.on1 {
  width: 48rpx;
  height: 48rpx;
  background: #1a9eff;
  border-radius: 50%;
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
  line-height: 48rpx;
  text-align: center;
  margin: 0 auto;
}

.btn {
  width: 220rpx;
  height: 68rpx;
  background: #1a9eff;
  border-radius: 34rpx;
  text-align: center;
  line-height: 68rpx;
  font-size: 28rpx;
  color: #fff;
}
.btn1 {
  width: 220rpx;
  height: 68rpx;
  background: #fff;
  border: 1rpx solid #d9d9d9;
  border-radius: 34rpx;
  text-align: center;
  line-height: 68rpx;
  font-size: 28rpx;
  color: #d9d9d9;
}
.t {
  width: 270rpx;
  height: 110rpx;
  border: 1rpx #1a9eff solid;
  text-align: center;
  font-size: 28rpx;
  color: #1a9eff;
  background: #cce5ff;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
}
.t1 {
  width: 270rpx;
  height: 110rpx;
  border: 1rpx #e0ebeb solid;
  text-align: center;
  font-size: 28rpx;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
}
.wu {
  color: #d9d9d9;
}
</style>